
<template>
  <div class="bgy-swdlxx-index">
    <el-container>
      <!-- 菜单 -->
      <el-aside>
        <navmenu></navmenu>
      </el-aside>
      
      <!-- 容器 -->
      <el-container>
        <el-header height="80px">
          <top-title></top-title>
          <section class="index-tabs clearfix">
            <el-tabs class="l" v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
              <el-tab-pane
                v-for="(item, index) in editableTabs"
                :key="item.menuId"
                :index="index"
                :label="item.title"
                :name="item.menuId">
              <div slot="label" @click="paneClick(item)" class="tabslabel">
                <i class="iconfont" :class="item.iconUrl"></i>
                <span>{{item.title}}</span>
              </div>
              </el-tab-pane>
            </el-tabs>
            <el-dropdown @command="dropdownCommand">
              <span class="el-dropdown-link rown-box">
                <i class="iconfont iconarrow-down"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </section>
        </el-header>
        <el-main class="main_box">
          <!-- <transition name="fade-transform" mode="out-in"> -->
            <keep-alive>
              <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
          <!-- </transition> -->
          <!-- <transition name="fade-transform" mode="out-in"> -->
            <router-view v-if="!$route.meta.keepAlive"></router-view>
          <!-- </transition> -->
          </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex';
// import navmenu from '@/components/navmenu/navmenu'; //菜单
// import topTitle from '@/components/topTitle/topTitle'; //头部

var viewer = null;
export default {
  name: 'index',
  data () {
    return {
        isShowIw: false,
        isShow:false,
        // asideWidth: '207px'
    }
  },
  computed:{
    ...mapState([
      'editableTabs',
      'editableTabsValue',
      'isCollapse'
    ]),
    editableTabsValue: {
      get() {
          return this.$store.state.editableTabsValue
        },
        set(newValue) {
          return this.$store.state.editableTabsValue
        }
    }
  },
  watch: {
    '$store.state.editableTabs': {
      immediate: true,
      handler (v) {
          if (v) {
            v.forEach(element => {
              if (element.id === this.editableTabsValue) {
                this.$router.push({
                  path: element.viewUri,
                  query: element.query
                })
              }
            })
          }
      }
    },
    '$store.state.isCollapse': {
      immediate: true,
      handler (v) {
        if(!v) {
          // this.asideWidth = '207px'
        } else {
          // this.asideWidth = '56px'
        }
      }
    }
  },
  components: {
    navmenu: resolve => {require(['@/components/navmenu/navmenu'], resolve)}, // 左侧菜单
    topTitle: resolve => {require(['@/components/topTitle/topTitle'], resolve)}, // 表头选择器
  },
  mounted() {
  },
  created(){
    // this.$store.dispatch('errorLog/addErrorLog', '123') // 
    // this.SAVE_EDITABLETABSVALUE()
    // this.SAVE_EDITABLETABS()
    // findProvinceAndCityTree().then(res => {
    //   this.SAVE_ADDRESSDATA(res.data)
    // })
  },
  methods: {
    ...mapMutations([
        'SAVE_TOKEN',
        'DETALE_EDITABLETABS',
        'SAVE_EDITABLETABSVALUE',
        'SAVE_EDITABLETABS',
        'SAVE_ADDRESSDATA'
      ]),
    /**
    * @method 删除标签页
      */
    removeTab(targetName) {
      this.DETALE_EDITABLETABS(targetName)
    },
    /**
     * @method 点击标签页
     */
    paneClick(params){
      this.SAVE_EDITABLETABSVALUE(params.menuId)
      this.$router.push({
        // path: params.viewUri,
        // query: params.query
        name: params.name,
        query: params.query
      })
    },
    dropdownCommand(params) {
      if (params === 'closeAll') {
        // 关闭全部 保留自己
        this.SAVE_EDITABLETABSVALUE()
        this.SAVE_EDITABLETABS()
        setTimeout(() => {
          this.$router.push({
            path: '/index'
          })
        }, 500);
      }
    }
  }
};
</script>

<style lang="scss">
@import  '../../style/mixin.scss';
@import  '../../style/common.scss';
@import "./index.scss";
/* 
enter-active 定义进入过渡的结束状态
leave-active 定义离开过渡的结束状态
 */
// .fade-transform-leave-active,
// .fade-transform-enter-active {
//   transition: all 0.5s;
// }

/* 
enter定义进入过渡的开始状态
 */
// .fade-transform-enter {
//   opacity: 0;
//   transform: translateX(-30px);
// }
/* 
leave-to离场动画结束后的状态
 */
// .fade-transform-leave-to {
//   opacity: 0;
//   transform: translateX(30px);
// }
</style>